@use "@/styles/variable.module.scss" as variable;

/**
  b(button) 
    .com-button {}
*/
@mixin b($name) {
  .#{variable.$namespace + variable.$common-separator + $name} {
    @content ($name);
  }
}

/**
  e(button)
    &__button {}
*/
@mixin e($name) {
  &#{variable.$element-separator + $name} {
    @content ($name);
  }
}

/**
  r(button) 
    &--button {}
*/
@mixin r($name) {
  &#{variable.$modifier-separator + $name} {
    @content ($name);
  }
}

/**
  s(active)
    &.is-active {}
*/
@mixin s($name) {
  &.#{variable.$state-prefix + $name} {
    @content ($name);
  }
}

/**
  cb(button) 
    &.com-button {}
*/
@mixin cb($name){
  &.#{variable.$namespace + variable.$common-separator + $name} {
    @content ($name);
  }
}

/**
  nb(button)
    &>.com-button {}
*/
@mixin nb($name){
  &>.#{variable.$namespace + variable.$common-separator + $name} {
    @content ($name);
  }
}

/**
  ne(button)
    &>&__button {}
*/
@mixin ne($name) {
  &>&#{variable.$element-separator + $name} {
    @content ($name);
  }
}

/**
  nots(active)
    &:not(.is-active) {}
*/
@mixin nots($name) {
  &:not(.#{variable.$state-prefix + $name}) {
    @content;
  }
}